<template>
	<view>
		<view v-if="userInfo !=''" class="content">
			<view class="userimg nickName">
				<image :src="userInfo.avatarUrl" mode=""></image>
			</view>
			<view class="userinfo" >
				{{userInfo.nickName}}
			</view>
		</view>
		<view v-else class="userinfo">
			<image src="" mode=""></image>
			<button open-type="getUserInfo" @getuserinfo="onGotUserInfo">点击登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: []
			}
		},
		onLoad() {
			this.changeLogin();
		},
		methods: {
			changeLogin() {
				// 授权
				// 获取用户详细信息, 可以获取到说明已经授权过, 直接拿到用户信息
				uni.getUserInfo({
					provider: 'weixin',
					//授权成功的回调
					success(res) {
						console.log(res)
					},
					//第一次进入小程序
					fail() {
						uni.showToast({
							title: '请点击授权进行登录',
							icon: 'none'
						});
					}
				});
			},

			/**
			 * 用户同意授权个人微信信息
			 * @param {Object} e 用户的信息
			 */
			onGotUserInfo(e) {
				console.log(e)
				var that = this
				that.userInfo = e.detail.userInfo
				console.info(e.detail.userInfo)
			}


		}
	}
</script>

<style>
	page {
		background-color: #f4f3f3;
	}

	.content {
		display: flex;
		flex-direction: column;
		background-color: #31A3FB;
	}

	.userinfo {
		width: 100%;
		align-items: center;
		text-align: center;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.userimg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
	}

	.userimg image {
		width: 150rpx;
		height: 150rpx;
		display: inline-block;
	}

	.nickName {
		font-size: 35rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}

	.userinfo button {
		width: 200rpx;
		height: 80rpx;
		margin: 0 auto;
		font-size: 35rpx;
	}
</style>
